<script setup lang="ts">
import BoxBlock from '../components/boxBlock.vue';
const DayLineChart = defineAsyncComponent(() =>
  import('../components/dayLineChart.vue')
);
import { Decoration9, ActiveRingChart } from "@kjgl77/datav-vue3";
import { defineAsyncComponent, reactive } from 'vue';

const conf = reactive({
  lineWidth: 24,
  digitalFlopStyle: {
    fill: 'pink',
    fontSize: 18,
  },
  data: [
    {
      name: '报废车',
      value: 198,
    },
    {
      name: '二手车',
      value: 102,
    },
    {
      name: '配件车',
      value: 184,
    },
    {
      name: '报废新能源',
      value: 3,
    },
  ],
})
</script>
<template>
  <div class="flex flex-col">
    <BoxBlock class="h-1/3" title="年度目标">
      <div class="flex flex-wrap justify-center items-center">
        <div class="w-1/2 mb-5 flex justify-center items-center">
          <Decoration9 style="width:110px;height:110px;">
            <div color-green font-600 class="content" bg="~ dark/0">
              年度目标<br />
              12000辆 </div>
          </Decoration9>
        </div>
        <div class="w-1/2  mb-5 flex justify-center items-center">
          <Decoration9 style="width:110px;height:110px;">
            <div color-green font-600 class="content" bg="~ dark/0">
              本年实际<br />
              7400辆
            </div>
          </Decoration9>
        </div>
        <div class="w-1/2  mb-5 flex justify-center items-center">
          <Decoration9 style="width:110px;height:110px;">
            <div color-green font-600 class="content" bg="~ dark/0">
              本月目标<br />
              700辆
            </div>
          </Decoration9>
        </div>
        <div class="w-1/2  mb-5 flex justify-center items-center">
          <Decoration9 style="width:110px;height:110px;">
            <div color-green font-600 class="content" bg="~ dark/0">
              本月实际<br />
              200辆
            </div>
          </Decoration9>
        </div>
      </div>
    </BoxBlock>
    <BoxBlock class="h-1/3" title="库存占比">
      <div class="flex items-center justify-center">
        <ActiveRingChart :config="conf" style="width:250px;height:250px" />
      </div>
    </BoxBlock>
    <BoxBlock class="h-1/3" title="生产计划">
      <div class="flex items-center justify-center">
        <DayLineChart />
      </div>
    </BoxBlock>
  </div>
</template>
<style scoped lang="less"></style>
